<script setup lang="ts">
import { deleteArticleItemApi, getArticleListApi } from '@/apis/article'
import { getSelectListApi } from '@/apis/common'
import type { ArticleData } from '@/types/article'
import type { SelectItem } from '@/types/common'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref, watch } from 'vue'
const reqParams = ref({
    status: undefined,
    channel_id: 1,
    begin_pubdate: '',
    end_pubdate: '',
    page: 1,
    per_page:10
})
const dateArr = ref<string[]>([])
//获取文章列表
const articleList = ref<ArticleData[]>([])

const wenzhang = async () => {
    const res = await getArticleListApi(reqParams.value)
    console.log(res);
    articleList.value = res.data.results
    total.value=res.data.total_count
    
}
const total = ref(0)

const getArticleList = ref<SelectItem[]>()
const pindao = async () => {
    const res = await getSelectListApi()
    // console.log(res);
    getArticleList.value=res.data.channels
}

const cardDateArr = ref<string[]>([])
watch(cardDateArr, (val) => {
    // console.log(val);

    if (val) {
        reqParams.value.begin_pubdate = val[0]
        reqParams.value.end_pubdate = val[1]
    } else {
        reqParams.value.begin_pubdate = ''
        reqParams.value.end_pubdate = ''
    }
}, { deep: true })

onMounted(() => {
    pindao()
    wenzhang()
}) 

const ondelete = (id: string) => {
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    //注意类型 传入数组格式的id
      await deleteArticleItemApi(id)
    ElMessage.success('删除成功')
      wenzhang()
  }).catch(()=>{})
}
</script>
<template>
    <div>
        <el-card shadow="always">
            <template v-slot:header>
                <div>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </template>
            <el-form label-width="100px">
                <el-form-item label="状态:">
                    <el-radio-group v-model="reqParams.status">
                        <el-radio :label="undefined">全部</el-radio>
                        <el-radio :label="0">草稿</el-radio>
                        <el-radio :label="1">待审核</el-radio>
                        <el-radio :label="2">审核通过</el-radio>
                        <el-radio :label="3">审核失败</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="频道:" style="width:400px">
                    <el-select clearable v-model="reqParams.channel_id" placeholder="请选择频道">
                        <el-option v-for="item in getArticleList" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                    <GeekChannel v-model="reqParams.channel_id" />
                </el-form-item>
                <el-form-item label="日期:" style="width:400px;">
                    <!-- 日期选择器  type="daterange" 范围选择 -->
                    <el-date-picker v-model="cardDateArr" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">查询</el-button>
                    <!-- {{ reqParams }} -->
                    {{ reqParams }}
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 筛选结果 -->
        <el-card shadow="always" style="margin-top:20px">
            <div slot="header">
                <p>根据筛选条件共查询到xx条结果</p>
            </div>
            <!-- 表格 -->
            <el-table :data="articleList">
                <!-- 封面 标题 状态 发布时间 阅读数 评论数 点赞数 操作 -->
                <el-table-column label="封面">
                    <!-- slot-scope="scope" 作用域插槽 -->
                    <template #default="scope">
                        <!-- <img :src="scope.row.cover.images[0]" style="width: 100px; height: 100px" /> -->
                        <!-- <p>{{ scope.row.cover.images[0] }}</p> -->

                        <!-- scope.row 相当于 循环时的 item 项目 -->
                        <!-- el-image 支持 preview-src-list 大图预览，fit 属性设置图片不变形 -->
                        <el-image :src="scope.row.cover.images[0]" :preview-src-list="scope.row.cover.images"
                            style="width: 100px; height: 100px" fit="cover">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="标题" prop="title" width="200"></el-table-column>
                <el-table-column label="状态" prop="status">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
                        <el-tag v-else-if="scope.row.status === 1" type="warning">待审核</el-tag>
                        <el-tag v-else-if="scope.row.status === 2" type="success">审核通过</el-tag>
                        <el-tag v-else-if="scope.row.status === 4" type="danger">审核失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="发布时间" prop="pubdate" width="200"></el-table-column>
                <el-table-column label="阅读数" prop="read_count"></el-table-column>
                <el-table-column label="评论数" prop="comment_count"></el-table-column>
                <el-table-column label="点赞数" prop="like_count"></el-table-column>
                <el-table-column label="操作">
                    <template #default="{row}">
                        <el-button @click="$router.push(`publish/${row.id}`)" type="primary">编辑</el-button>
                        <el-button @click="ondelete(row.id)" type="danger">删除</el-button>
                        <!-- 作用域插槽中提出id备用 -->
                        {{ row.id }}
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="page-container">
                <el-pagination layout="total, prev, pager, next,sizes,jumper" :total="total"
                    :page-sizes="[2, 5, 10, 20, 100]" v-model:page-size="reqParams.per_page" v-model:current-page="reqParams.page"
                    @change="wenzhang()" />
            </div>
        </el-card>
    </div>
</template>
<style>
/*样式*/
</style>